<template>
	<div class="zh-footer"
		v-loading="loading.status"
		:element-loading-text="loading.txt"
	>
		<div class="footer">
			<div class="i_maxW">
				<div class="i_footerBox clear">
					<div class="i_address fl">
						<ul>
							<li>地址：{{ruleForm.info.info_address}}</li>
							<li>邮箱：{{ruleForm.info.info_email}}</li>
							<li>联系电话：{{ruleForm.info.info_phone}}</li>
						</ul>
					</div>
					<div class="i_friendlyLink fr">
						<div class="i_friendlyLink1">
							<!-- <span>友情链接</span> -->
							<a  v-for="(item, index) in ruleForm.info_link" :key="index" href="javascript:void(0)">{{item.name}}</a>
						</div>
						<div class="i_friendlyLink2">
							<!-- <span>平台介绍</span> -->
							<a  v-for="(item, index) in ruleForm.friend_link" :key="index" href="javascript:void(0)">{{item.name}}</a>
						</div>
					</div>
				</div>
				<div class="i_copyright">
					{{ruleForm.info.info_copyright}}
				</div>
			</div>
		</div>
		<!--  -->
		<div class="auxiliary-info">


			<el-form :model="ruleForm" ref="ruleForm" label-width="100px" :label-position="labelPosition">
				<!-- <div class="path-set">
					<h3>辅助信息</h3>
					<el-form-item label="地址" prop="info.info_address"
					:rules="[
						{min: 5,max: 100,message: '长度在 5 到 100 个字符'},
						{ required: true, message: '地址不能为空', trigger: 'blur' },
					]">
						<el-input v-model.trim="ruleForm.info.info_address" placeholder="请输入地址"
						></el-input>
					</el-form-item>
					<el-form-item label="邮箱" prop="info.info_email"
						:rules="[
						{required: true, message: '邮箱不能为空', trigger: 'blur'},
						{type: 'email', message: '邮箱格式不正确', trigger: 'blur'},
						{min: 5,max: 50,message: '长度在 5 到 50 个字符'}
					]">
						<el-input type="email" v-model="ruleForm.info.info_email" placeholder="请输入邮箱"></el-input>
					</el-form-item>
					<el-form-item label="联系电话" prop="info.info_phone"
					:rules="[{required: true, message: '联系电话不能为空', trigger: 'blur'},{ pattern:this.rules.mobile.reg,message: this.rules.mobile.msg}]">
						<el-input v-model.trim="ruleForm.info.info_phone" placeholder="请输入联系电话"></el-input>
					</el-form-item>
					<el-form-item label="版权信息" prop="info.info_copyright"
					:rules="[{required: true, message: '版权信息不能为空', trigger: 'blur'},{min: 5,max: 100,message: '长度在 5 到 100 个字符'}]">
						<el-input v-model.trim="ruleForm.info.info_copyright" placeholder="请输入版权信息"></el-input>
					</el-form-item>
				</div> -->

				<div class="path-set">
					<h3>友情链接</h3>
					<el-form-item  prop="link"   label-width="0" v-for="(item, index) in ruleForm.friend_link" :key="index" class="newlink">
						<el-col :span="8">
							<el-form-item label="链接名称" :prop="'friend_link.' + index + '.name'"
								:rules="formRules"
							>
								<el-input v-model="item.name" placeholder="请输入链接名称"></el-input>
							 </el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="链接地址" :prop="'friend_link.' + index + '.link'"
							 :rules="formRulesLink">
								<el-input v-model.url="item.link" placeholder="请输入链接地址，如：http://www.baidu.com"></el-input>
							 </el-form-item>
						</el-col>
					</el-form-item>
					<div class="link-btn">
						<i class="el-icon-minus" @click="removelink"></i>
						<i class="el-icon-plus" @click="addlink"></i>
					</div>
				</div>

				<!-- <div class="path-set">
					<h3>辅助项</h3>
					<el-form-item  prop="link"   label-width="0" v-for="(item, index) in ruleForm.info_link" :key="index" class="newlink">
						<el-col :span="8">
							<el-form-item label="链接名称" :prop="'info_link.' + index + '.name'"
							:rules="formRules">
								<el-input v-model="item.name" placeholder="请输入版权信息"></el-input>
							 </el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="链接地址" :prop="'info_link.' + index + '.link'"
							:rules="formRules">
								<el-input v-model.url="item.link" placeholder="请输入链接地址"></el-input>
							 </el-form-item>
						</el-col>
					</el-form-item>
					<div class="link-btn">
						<i class="el-icon-minus" @click="removelink2"></i>
						<i class="el-icon-plus" @click="addlink2"></i>
					</div>
				</div> -->

				<el-form-item style="marginTop: 30px">
					<el-button size="medium" type="primary" plain @click="resetForm()">重置</el-button>
					<el-button size="medium" type="primary" @click="submitForm('ruleForm')">保存</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>
<script>
	export default{
		data(){
			return {
				loading:{
		    		status:false,
		    		txt:'获取数据...'
		    	},
		    	listData:[],
				labelPosition: 'left',
				ruleForm: {
					friend_link:[],
					info_link:[],
                    info:[],
				},
				formRules:[
			    	{required: true, message: '不能为空', trigger: 'blur'},
			    	{min: 2,max: 100,message: '长度在 2 到 100 个字符'},
			    	{pattern:/^\S+$/,message:'不能包含空格'}
			    ],
				 formRulesLink:[
			    	{required: true, message: '不能为空', trigger: 'blur'},
                    {pattern: /^\S+$/,message:'不能包含空格'},
                    {pattern: /^https?:\/\/(([a-zA-Z0-9_-])+(\.)?)*(:\d+)?(\/((\.)?(\?)?=?&?[a-zA-Z0-9_-](\?)?)*)*$/i, message:'链接格式错误'},
			    ],
			}
		},
		created(){
			this.getFooterData();
		},
		methods: {
			resetForm(){
				this.getFooterData();
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.saveFooterData();
					} else {
						return false;
					}
				});
			},
			getFooterData(){
				let success = (data=>{
            		this.ruleForm = data.data;
            	})
            	let fail = ( data => {
            		this.loading.status = false;
            		this.$message.error(data.msg)
            	})

            	//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
            	this.$ajax.get('api/setting/page_foot',{params: {},func:{success:success,fail:fail}})
			},
			saveFooterData(){
                this.$ajax.post('api/setting/page_foot',this.ruleForm);
                sessionStorage.setItem('CopyrightInfo', this.ruleForm.info.info_copyright);
                this.$store.commit('SET_COPYRIGHTiNFO', this.ruleForm.info.info_copyright)
			},
			addlink(){
				if (this.ruleForm.friend_link.length >= 5) {
					this.$message.error('最多只能添加 5 条哦~');
					return
				}
				this.ruleForm.friend_link.push({
					name: '',
					link: ''
				})
			},
			removelink(){
				if (this.ruleForm.friend_link.length === 0) {
					this.$message.error('已经被你删完了哦~~');
					return
				}
				this.ruleForm.friend_link.splice(this.ruleForm.friend_link.length-1, 1)
			},
			addlink2(){
				if (this.ruleForm.info_link.length >= 5) {
					this.$message.error('最多只能添加 5 条哦~');
					return
				}
				this.ruleForm.info_link.push({
					name: '',
					link: ''
				})
			},
			removelink2(){
				if (this.ruleForm.info_link.length === 0) {
					this.$message.error('已经被你删完了哦~~');
					return
				}
				this.ruleForm.info_link.splice(this.ruleForm.info_link.length-1, 1)
			}
		}
	}
</script>
<style lang="scss">
	.zh-footer{

		.footer{
			background-color: #3a486f;
		}

		.i_footerBox{
			padding: 20px 0;
			font-size: 12px;
			color:#fff;
			border-bottom: 1px dashed #697798;
		}

		.i_address{
			width: 429/1200*100%;
			border-right: 1px dashed #697798;
			>ul{
				>li{
					line-height: 19px;
					text-indent: 10px;
					&:nth-of-type(2){
						padding: 20px 0;
					}
				}
			}
		}

		.i_maxW{
			max-width: 88%;
			margin: auto;
		}


		.i_friendlyLink{
			width: 720/1200*100%;
		}

		.i_friendlyLink1{
            margin-bottom: 40px;
			text-align: center;
			>a{
				font-size: 12px;
				display: inline-block;
				vertical-align: top;
				color: #fff;
				border-right: 1px solid #969696;
				width: 190/720*100%;
				line-height: 19px;
				&:last-of-type{
					border:0;
				}
			}
		}


		.i_friendlyLink2{
			text-align: center;

			>span{
				line-height: 19px;
			}
			>a{
				display: inline-block;
				vertical-align: top;
				color: #a2b2d5;
				/* width: 120/720*100%;*/
				line-height: 19px;
				padding-left: 25px;
                word-wrap: break-word;
                word-break: break-all;
			}
		}


		.i_copyright{
			line-height: 19px;
			color:#fff;
			padding: 20px 0;
			text-align: center;
			font-size: 12px;
		}
		.newlink{
			text-align: center;
			text-align-last: justify;
			margin: 0;
			.el-col{
				float: initial;
				display: inline-block;
				vertical-align: top;
				text-align: left;
				text-align-last: initial;
			}
			.el-form-item__label{
				display: inline-block;
				vertical-align: top;
				text-align: left;
				text-align-last: initial;
			}
		}
		.link-btn{
			>i{
				padding: 10px;
				background: #DEEFFF;
				border-radius: 3px;;
				color: #A0C1E1;
				cursor: pointer;
				transition: .3s;
				margin-right: 10px;
				&:hover{
					color: #fff;
					background-color: #409EFF;
				}
			}
		}

		.path-set{
			max-width: 1000px;
			margin-top: 40px;
			>h3{
				margin-bottom: 20px;
			}
		}
	}

</style>
